<template>
	<view class='setting'>
		<view class='content'>
			<view class='line dFlex jBetween_aCenter'>
				<view class='line_title'>头像</view>
				<view class='lineVal dFlex jEnd_aCenter'>
					<view class='tx imgPublic' @click='chooseImg'>
						<image :src='userInfo.image_head'></image>
					</view>
				</view>
			</view>
			<view class='line dFlex jBetween_aCenter'>
				<view class='line_title'>昵称</view>
				<view class='lineVal dFlex jEnd_aCenter'>
					<input type="text" v-model='userInfo.nickName' @blur='editInfo("nickName")' placeholder='请输入昵称'>
					<u-icon name="arrow-right" color='#CCCCCC' ></u-icon>
				</view>
			</view>
			<!-- <view class='line dFlex jBetween_aCenter'>
				<view class='line_title'>真实姓名</view>
				<view class='lineVal dFlex jEnd_aCenter'>
					<input type="text" placeholder='请输入真实姓名'>
					<u-icon name="arrow-right" color='#CCCCCC' ></u-icon>
				</view>
			</view> -->
			<view class='line dFlex jBetween_aCenter'>
				<view class='line_title'>手机号</view>
				<view class='lineVal dFlex jEnd_aCenter'>
					<input type="number" v-model='userInfo.tel' @blur='editInfo("tel")' placeholder='请输入手机号码'>
					<u-icon name="arrow-right" color='#CCCCCC' ></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfo,
		changeInfo,
	} from '@/tool/http.js'
	import config from '@/tool/common.js';
	export default {
		data() {
			return {
				userInfo:{},
			};
		},
		onShow(){
			this.uid = uni.getStorageSync('uid')?uni.getStorageSync('uid'):'';
			this.identify = uni.getStorageSync('use_identify');
			if(this.uid){
				this.getUserInfo();
			}
		},
		methods:{
			// 编辑信息
			async editInfo(key){
				if(!this.userInfo[key]){
					uni.showToast({
						title:'修改的内容不能为空',
						icon:"none"
					})
					return;
				}
				if(key == 'tel' && this.userInfo[key].length != 11){
					uni.showToast({
						title:'手机号格式不正确',
						icon:"none"
					})
					return;
				}
				var data = {memberId:this.uid};
				if(key == 'nickName'){
					data.nickName = this.userInfo[key];
				}else{
					data.tel = this.userInfo[key];
				}
				var res = await changeInfo(data);
				if(res){
					uni.showToast({
						title:'信息已保存',
						icon:"success"
					})
					this.getUserInfo();
				}
			},
			// 选择头像
			chooseImg(){
				uni.chooseImage({
					count:1,
					mediaType:['image'],
					sourceType:['album', 'camera'],
					success:(file)=>{
						if(file.tempFilePaths.length){
							uni.uploadFile({
								url:config.domain+'/ship.php/Regist/uploadimage',
								filePath:file.tempFilePaths[0],
								name:'image',
								success: async(res) => {
									res = JSON.parse(res.data);
									console.log(res.data.image_path);
									if(res.code == 200){
										var res = await changeInfo({
											memberId:this.uid,
											image_head:res.data.image_path,
										});
										if(res){
											this.getUserInfo();
										}
									}
								},
								fail:(err)=>{
									console.log(err)
									uni.showToast({
										title:'图片上传失败',
										icon:"none"
									})
								}
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			// 用户信息
			async getUserInfo(){
				let res = await userInfo({
					memberId:this.uid,
				});
				console.log(res);
				if(res){
					this.userInfo = res;
				}
			},
		}
	}
</script>

<style lang="scss">
	.setting{
		.content{
			.line{
				.lineVal{
					flex:1;
					margin-left: 12px;
					.tx{
						width: 40px;
						height: 40px;
						border-radius: 50%;
						overflow: hidden;
						image{
							display: block;
							width:100%;
							height: 100%;
						}
					}
					input{
						text-align: right;
						display: inline-block;
						margin-right: 5px;
					}
				}
				padding: 10px 0;
				border-bottom: 1px solid #f8f8f8;
			}
			.line:last-child{
				border: none;
			}
			padding: 12px;
			width: 100%;
			background: white;
			border-radius: 5px;
			box-sizing: border-box;
		}
		padding: 12px;
		box-sizing: border-box;
	}
</style>
